<template>
	<view>
		<u-sticky>
			<view class="top">
				<view class="left">
					<view class="text">
						当前剩余<text> {{jindoujuan}} </text>
						<image src="../static/jingyan5.png" class="jingyan"></image>
					</view>
				</view>
				<view class="right">
					<view class="list" @click="toPage('record')">
						<image src="../static/g1.png" mode=""></image>
						<view class="name">
							兑换记录
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="content">
			<view v-if="list.length>0">
				<view class="list" @click="toPage('conversion?maid='+item.maid)" :style="'background:'+item.color "
					v-for="(item,index) in list" :key="index">
					<image class="img" :src="img_pre+item.manor_logo"></image>
					<view class="con">
						<view class="name">
							{{item.title}}
						</view>
						<view class="text">
							兑换消耗{{item.use_gdbticket_number}}金蜜券
						</view>
					</view>
					<image class="go" src="/static/image/a6.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': 'transparent'
				},
				logistics: false,
				logistics2: false,
				pay: false,
				title: "",
				count: "",
				list: [],
				id: 0,
				password: "",
				page: 1,
				init_price: 0,
				timeout: 2000,
				jindoujuan: 0,
				exchange_count: 0
			}
		},
		onLoad(option) {
			than = this;
			than.post('api/Goldbean/manorExchangeList', null, function(data) {
				for (let i = 0; i < data.list.length; i++) {
					switch (i) {
						case 0:
							data.list[i].color = "#FCF5EA"
							break;
						case 1:
							data.list[i].color = "#F5F6FA"
							break;
						case 2:
							data.list[i].color = "#F3F9F9"
							break;
						case 3:
							data.list[i].color = "#FAF5F5"
							break;
						case 4:
							data.list[i].color = "#FCF5EA"
							break;
						default:
							break;
					}
				}
				than.list = data.list;
				than.exchange_count = data.exchange_count;
				than.jindoujuan = data.jindoujuan;
			})
		},
		methods: {

		}
	}
</script>

<style lang="less">
	.none {
		margin: auto;
	}

	.content {
		background: #FFFFFF;
		width: 100%;
		border-radius: 70rpx 0rpx 0rpx 0rpx;

		.title {
			padding-left: 62rpx;
			padding-right: 38rpx;
			display: flex;
			align-items: center;
			height: 90rpx;

			.name {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.text {
				margin-left: auto;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;

				text {
					color: #F46413;
					font-size: 36rpx;
				}
			}
		}

		.list {
			margin: 0 auto 24rpx;
			background: #FFFFFF;
			width: 678rpx;
			border-radius: 20rpx;
			height: 236rpx;
			position: relative;
			display: flex;
			align-items: center;

			.img {
				margin: 0 24rpx;
				width: 97rpx;
				height: 97rpx;
			}

			.go {
				margin: 0 18rpx 0 auto;
				width: 130rpx;
				height: 130rpx;
			}

			.con {
				.name {

					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #5B4D41;
					margin-bottom: 20rpx;
				}

				.text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
		}
	}


	.top {
		height: 170rpx;
		display: flex;
		align-items: center;

		.left {
			padding-left: 61rpx;

			.jingyan {
				width:36rpx;
				height: 26rpx;
			}

			.name {
				font-size: 60rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}

			.text {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;

				text {
					font-weight: bold;
					color: #F46813;
					font-size: 44rpx;
					margin: 0 10rpx;
				}
			}
		}

		.right {
			padding-right: 35rpx;
			margin-left: auto;
			display: flex;
			align-items: center;

			.list {
				text-align: center;

				image {
					width: 59rpx;
					height: 59rpx;
				}

				.name {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				margin-left:40rpx;
			}
		}
	}
</style>
